<template>
  <a-modal
    class="modal"
    unmount-on-close
    :maskClosable="false"
    :title="title"
    v-model:visible="modalVisible"
    @before-ok="handleBeforeOk"
    @cancel="handleCancel"
    @close="handleClose"
    @before-open="handleBeforeOpen"
    v-bind="$attrs"
    width="50%"
  >
    <a-alert class="mb-5 items-start">
      <template #icon>
        <icon-exclamation-circle />
      </template>
      <div> 请注意，今日设置完成后，第二天生效。 </div>
    </a-alert>
    <div class="modal-title flex mb-5">
      <div class="mr-52">车牌号: {{ form.licenseNo }}</div>
      <div>购置税总额: {{ unitVal(form.totalAmount) }}</div>
    </div>
    <a-form :model="form" :rules="rules" ref="formRef" label-align="left">
      <a-form-item label="是否分期核算">
        <a-radio-group v-model="form.ifOpen">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <template v-if="form.ifOpen === 1">
        <a-form-item field="receivableNum" label="期数">
          <i-input-number v-model="form.receivableNum" unit="期" style="width: 30%" :max="100" :min="1" :step="1" :precision="0" />
          <div class="ml-5" v-if="form.receivableNum">每期金额：{{ unitVal(periodAmount) }}</div>
        </a-form-item>
        <a-form-item field="firstDate" label="第一期付款日">
          <i-date-picker :popupContainer="'.modal'" v-model="form.firstDate" />
        </a-form-item>
      </template>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { updatePurchaseTax } from '@/api/dashboard/vehicleAccounting'
  import decimal from '@/utils/calculation'
  import { unitVal } from '@/utils'

  import { computed, ref } from 'vue'

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => ({}),
    },
  })

  const emits = defineEmits(['update:visible', 'ok', 'cancel', 'close'])

  // 计算属性处理双向绑定
  const modalVisible = computed({
    get: () => props.visible,
    set: (value) => emits('update:visible', value),
  })

  const form = ref<any>({})

  const formRef = ref()
  const rules = {
    receivableNum: {
      required: true,
      message: '请输入',
    },
    firstDate: {
      required: true,
      message: '请选择',
    },
  }

  const handleBeforeOpen = () => {
    console.log('open', props.params)

    form.value = {
      ...props.params,
      ifOpen: props.params.ifOpen ?? 1,
    }
  }

  // 计算每期金额
  const periodAmount = computed(() => {
    return decimal.div(form.value.totalAmount || 0, form.value.receivableNum || 0)
  })

  // 处理事件
  const handleBeforeOk = (done: (closed: boolean) => void) => {
    formRef.value.validate((error: any) => {
      if (error) {
        done(false)
      } else {
        updatePurchaseTax({
          carIdList: [form.value.carId],
          ifOpen: form.value.ifOpen,
          receivableNum: form.value.receivableNum,
          firstDate: form.value.firstDate,
        })
          .then(() => {
            emits('ok')
            done(true)
          })
          .catch(() => {
            done(false)
          })
      }
    })
  }

  const handleCancel = () => {
    modalVisible.value = false
    emits('cancel')
  }

  const handleClose = () => {
    formRef.value.resetFields()
    form.value.ifOpen = 1
    emits('close')
  }
</script>

<style scoped lang="less"></style>
